<template>
  <view class="violation-list">
    <view class="violation-item" v-for="(item, index) in feeList" :key="index">
      <!-- 顶部信息 -->
      <view class="violation-item-header">
        <view class="violation-item-header-left">
          <view class="violation-amount">违章单号：{{ item.businesCode }}</view>
          <view class="violation-code">
            {{ item.carLicenseNo }}
            <ve-tag color="red" style="margin-left: 16rpx" :title="item.feeStatusName" />
          </view>
        </view>
        <!-- 多选框 -->
        <view class="violation-item-header-right">
          <customCheck size="36" v-model="item.check" v-model:indeterminate="item.indeterminate" @change="onOrderItemChange(item)" />
        </view>
      </view>
      <!-- 费用信息 -->
      <view class="violation-item-content">
        <ve-cell-price label="费用金额" :value="item.totalAmount" style="margin-bottom: 8rpx" />
        <view class="detail-fee-list" v-if="item.feeDetailList && item.feeDetailList.length > 0">
          <ve-cell-price
            v-for="detailFee in item.feeDetailList"
            :key="detailFee.id"
            :label="detailFee.itemName"
            :value="detailFee.amount"
            style="margin: 12rpx 0 12rpx 0"
          />
        </view>
        <ve-cell-price label="待结金额" :value="item.outstandingAmount" class="custom-cell" />
        <ve-cell label="违章时间">{{ item.eventTime }}</ve-cell>
        <ve-cell label="生成时间">{{ item.createTime }}</ve-cell>
        <ve-cell label="关联单号" style="margin-bottom: 8rpx">{{ item.orderCode }}</ve-cell>
      </view>
    </view>
  </view>
</template>
<script setup>
  import customCheck from './custom-check.vue'

  const emits = defineEmits(['change'])

  const props = defineProps({
    feeList: Array,
  })

  // 点击违章单号
  const onOrderItemChange = () => {
    emits('change')
  }
</script>
<style lang="less" scoped>
  .violation-item {
    border-radius: 6rpx;
    overflow: hidden;
    background-color: #ffffff;
    .violation-item-header {
      width: 100%;
      background: #3072f6;
      padding: 24rpx 32rpx 24rpx 24rpx;
      display: flex;
      .violation-item-header-left {
        flex: 1;
        .violation-amount {
          font-weight: 600;
          font-size: 32rpx;
          color: #ffffff;
          line-height: 44rpx;
        }
        .violation-code {
          font-size: 28rpx;
          color: #ffffff;
          line-height: 44rpx;
          margin-top: 8rpx;
          display: flex;
          align-items: center;
        }
      }
      .violation-item-header-right {
        flex-shrink: 0;
        margin-left: 30rpx;
      }
    }
    .violation-item-content {
      padding: 24rpx 24rpx 24rpx;
      /deep/ .ve-cell {
        margin: 0;
        margin-bottom: 8rpx;
      }
      .detail-fee-list {
        margin-bottom: 8rpx;
        background: #edeef1;
        padding: 12rpx 24rpx 12rpx;
        /deep/ .ve-cell-title {
          width: 156rpx;
          line-height: 1;
        }
      }
    }
  }
  .violation-item + .violation-item {
    margin-top: 24rpx;
  }
  .custom-cell {
    /deep/ .ve-cell-price {
      color: #f53f3f;
    }
  }
</style>
